<!-- eslint-disable vue/multi-word-component-names -->
<template>
<div class="t1">
  <div class="cenertbox">
    <h2>
      <img src="@/assets/components/芜湖.png" style="width:30px;height:30px;vertical-align: top;">
      {{title}}
    </h2>
    <div  v-for="v in shujuList" :key="v.id" class="contentbox"  @click="aaa(v)">
      <div class="left">
        <img v-imgErr="require('@/assets/components/444.jpg')" :src="v.image" alt="">
      </div>
      <div class="right">
          <h1>{{v.title ? v.title : v.name}}</h1>
          <span>{{v.desc}}</span>
      </div>
    </div>
  </div>
</div>
<!-- <property-details></property-details> -->
</template>

<script>
// import PropertyDetails from '@/views/detail/index.vue'
export default {
  props: {
    shujuList: {
      type: Array,
      required: true
    },
    title: {
      type: String,
      required: true
    }
  },
  components: {
    // PropertyDetails
  },
  methods: {
    async aaa (val) {
      this.$emit('xxList', val)
    }
  }
}
</script>

<style lang='scss' scoped>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.t1{
  background-color: #fff;
  margin-bottom: 200px;
.cenertbox{
    margin: 0 auto;
    width: 62.5vw;
    height: 100%;
    // background-color: red;
    h2{
      margin-top: 20px;
      line-height: 30px;
      color: orange;
      text-align: left;
    }
    .contentbox{
      margin: 20px 0 ;
      padding: 20px;
      display: flex;
      border: 1px solid #ece9ed;
      height: 250px;
      .left{
        width:250px ;
        border-right: 1px solid #ece9ed;
        display: flex;
        justify-content: center;
        align-items: center;
        img{
          width: 200px;
          height: 200px;

        }
      }
      .right{
        h1{
            padding: 0 0 20px ;
        }
        flex: 1;
        text-align: center;
        line-height: 30px;
      }
    }
}
}

</style>
